<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import { statistics } from '@/api/index';
import { post } from '@/utils/request';
import * as echarts from 'echarts';
const labelList: any = ref([])
const valueList: any = ref([])
const timer: any = ref(null)
const options = reactive({
  title: [
    {
      text: '单位:车辆',
      left: '2%',    // 左侧对齐（与grid.left一致）
      top: 0,        // 顶部对齐
      textStyle: {
        color: 'rgba(255,255,255,0.8)',
        fontSize: 14,
        fontWeight: 'normal'
      }
    },
    // 右上角显示总计
    {
      text: '总计:223辆',
      right: '4%',   // 右侧对齐（与grid.right一致）
      top: 0,        // 顶部对齐
      textStyle: {
        color: 'rgba(255,255,255,0.8)',
        fontSize: 14,
        fontWeight: 'bold'
      }
    }
  ],
  tooltip: {
    trigger: 'axis',
    showDelay: 0,
    axisPointer: {
      type: 'shadow',
      width: 4,  // 这才是控制阴影宽度的正确属性
      shadowStyle: {
        color: 'rgba(74, 211, 164, 0.15)'
      }
    }
  },
  grid: { left: '5%', right: '5%', top: '20%', bottom: '2%', containLabel: true },
  xAxis: {
    type: 'category',
    data: labelList,
    axisLabel: { color: 'rgba(255,255,255,0.8)', fontSize: 12, margin: 15 },
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: { color: 'rgba(255,255,255,0.8)', fontSize: 14, formatter: '{value}' },
    splitLine: {
      lineStyle: {
        type: 'dashed',  // 设置为虚线
        color: 'rgba(255, 255, 255, 0.3)',  // 设置颜色（半透明白色）
        width: 1,  // 线宽
        dashOffset: 0,  // 虚线偏移量
        // dashArray: [4, 2]  // 自定义虚线样式：4像素实线，2像素空白
      },
    },

    axisLine: { show: false },
    axisTick: { show: false }
  },
  series: [{
    data: valueList,
    type: 'bar',
    barWidth: 30,
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 0, color: 'rgba(97, 145, 236, 0.2)' },
        { offset: 1, color: 'rgba(97, 145, 236, 1)' }
      ])
    },
    label: {
      show: true,
      position: 'top',
      color: '#6191EC',
      fontSize: 12,
      lineHeight: 12,
      fontWeight: 400,
      textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)'
    },
  }]
})

const getList = async () => {
  try {

    const res: any = await post(statistics.vehicle)
    if (res.code === '0000') {
      labelList.value = []
      valueList.value = []
      res.data.forEach((item: any) => {
        labelList.value.push(item.status)
        valueList.value.push(item.num)
      })
      // 这里可以处理返回的数据
      // options.series[0].data = res.data; // 假设返回的数据格式符合要求
    }
  } catch (error) {

  }
}


onMounted(() => {
  getList()

  // 定时每十分钟刷新一次
  timer.value = setInterval(() => {
    getList()
  }, 600000);
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
})
</script>

<template>
  <div class="right-top flex flex-col">
    <div class="title w-full h-[40px] flex items-center pl-[12px] pr-[14px] mb-[20px] justify-between">
      车次状态统计
      <img src="@/assets/img/content-img/title-point-left-top.png" alt="" class="title-opint w-[12px] h-[12px]">
    </div>
    <!-- 内容 -->
    <div class="content w-full h-[calc(100%-60px)]">
      <echart :options="options" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.right-top {
  border: 1px solid rgba(97, 145, 236, 0.3);
  background: rgba(15, 23, 52, 0.5);
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
}

.content {
  width: 100%;
  height: calc(100% - 60px);
  padding: 0;
}

.title {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 700;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 20px;
  text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
  text-align: left;
  font-style: normal;
  text-transform: none;
  border-left: 7px solid #6191EC;
  background-image: url('@/assets/img/content-img/title-background-left-top.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.total {
  position: absolute;
  right: 50px;
  top: 12px;
  font-size: 15px;
  color: #fff;
  font-weight: 600;
}
</style>
